<template>
  <!-- 账号密码登录 -->
  <div class="account">
    <cell-group :border="false" >
  <cell title=""  size="large" :to="'/'">
     <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  <template #right-icon >
    <icon name="cross" class="cross" />
  </template>
  </cell>
</cell-group>
     <div>
      <h1>宝甄</h1>
      <h2>欢迎来到宝甄</h2>
     </div>

    <Form @submit="onSubmit">
     <cell-group inset>
     <field
      v-model="mobile"
      name="mobile"
      placeholder="请输入手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />
    <field
      v-model="password"
      type="password"
      name="password"
      placeholder="请输入密码"
      :rules="[{  message: '请填写密码' }]"
    />
  </cell-group>
  <checkbox v-model="checked" checked-color="#FFC731" style="padding: 20px 20px;">
    未注册的手机号登录后将自动生成账号，且代表您已阅读并同意《用户协议》和《隐私政策》
  </checkbox>
  <div style="margin: 16px;">
   
    <Button round block type="primary" color="#FFC731" style="color:#272727; font-size:20px;font-weight: bold;" native-type="submit">
      登录
    </Button>
  </div>
   </Form>
   <router-link :to="{name:'Login'}">验证码登录</router-link>
  </div>
</template>
<script setup>
    import { ref } from "vue";
    import { useRouter } from "vue-router";
    import { Form, Field, CellGroup,Button ,Checkbox, CheckboxGroup,Cell,Icon,Toast } from 'vant';
    import { setToken } from "../utils/tools";
    import {stringify} from "qs";
    import {accountLoginAPI} from "../services/auth";
    const { replace } = useRouter();
    const mobile = ref('');
    const userName = ref("");
    const password = ref('');
    const checked=ref(true);
    //登录验证
    const onSubmit = (values) => {
      console.log(values);
      if(checked.value){
      accountLoginAPI(stringify(values)).then((res) => {
        console.log(res);
    if (res.code == 200) {
      Toast.success("登录成功");
      setToken(res.data);
      // 跳转
      replace({
        name: "User",
      });
    } else {
      Toast.fail(res.msg);
    }
  });
}else{
  Toast.fail('请先勾选用户协议');
}
    };
</script>
<style >
  
  a{
    display: block;
    text-align: center;
    color: #6D6D6D;
  }
  
  .van-icon{
  font-size: 2rem;
}
  .van-field{
    border-bottom: 1px solid #cecece;
  }
  .van-checkbox__label{
  font-size:.4rem;
  color: #575757 
}
</style>